<template>
  <div class="first-div">
    <!-- 模糊查询 -->
    <el-form :inline="true" :model="page" class="demo-form-inline">
      <el-form-item label="标题">
        <el-input v-model="page.params.blogTitle" placeholder="博客标题"></el-input>
      </el-form-item>
      <!-- 分类 -->
      <el-form-item label="分类">
        <el-select v-model="page.params.blogType" placeholder="博客分类">
          <el-option
            v-for="type in typeList"
            :key="type.typeId"
            :label="type.typeName"
            :value="type.typeId"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 排序列 -->
      <el-form-item label="排序列">
        <el-select v-model="page.sortColumn" placeholder="排序列">
          <el-option
            v-for="(item,index) in sortColumn"
            :key="index"
            :label="item.name"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 排序方式 -->
      <!-- 排序列 -->
      <el-form-item label="排序方式">
        <el-select v-model="page.sortMethod" placeholder="正序">
          <el-option
            v-for="(item,index) in sortMethod"
            :key="index"
            :label="item.name"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 卡片列表 -->
    <el-row>
      <el-col :span="6" v-for="(blog, index) in page.list" :key="index">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix" style="text-align: center;">
            <span>{{blog.blogTitle}}</span>
            <span><el-tag type="success">{{blog.typeName}}</el-tag></span>
          </div>
          <el-image :src="blog.blogImage" style="width:100%;height:160px"></el-image>
          <div style="text-align: center;">
            <span>{{blog.blogRemark}}</span>
          </div>
          <div style="text-align: center; margin-top:15px">
            <span>点赞：{{blog.blogGoods}}</span>
            <span>收藏：{{blog.blogCollection}}</span>
            <span>阅读：{{blog.blogRead}}</span>
            <span>评论：{{blog.blogComment}}</span>
          </div>
          <div style="margin: 15px auto; width:150px;">
            <el-button type="warning" size="small" @click="update(index)">修改</el-button>
            <el-button type="danger" size="small">删除</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2, 4, 8, 12]"
      :page-size="4"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.totalCount"
    ></el-pagination>
  </div>
</template>
<script>
import blogApi from "@/api/blog";
export default {
  data() {
    return {
      page: {
        currentPage: 1, // 当前页
        pageSize: 4, // 每页显示条数
        totalPage: 0, // 总页数
        totalCount: 0, // 总条数
        params: {blogTitle:"",blogType:""}, // 查询参数对象
        list: [], // 数据
        sortColumn: "", // 排序列
        sortMethod: "asc" // 排序方式
      },
      blog: {
        blogId: "",
        blogTitle: "",
        blogImage: null,
        blogContent: null,
        typeName: "",
        blogSource: null,
        blogRemark: null
      },
      typeList: this.$store.getters.typeList, // 分类列表
      drawer: false,
      pageSize: 4,
      currentPage: 1,
      //排序列
      sortColumn: [
        { name: "id", value: "blog_id" },
        { name: "标题", value: "blog_title" },
        { name: "创建时间", value: "created_time" },
        { name: "修改时间", value: "update_time" }
      ],
      //排序方式
      sortMethod: [
        { name: "正序", value: "asc" },
        { name: "倒序", value: "desc" }
      ]
    };
  },
  created() {
    this.getBlogList();
  },
  methods: {
    getBlogList() {
      //分页查询
      blogApi.getByPage(this.page).then(res => {
        this.page = res.data;
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.page.pageSize = val;
      this.getBlogList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.page.currentPage = val;
      this.page.pageSize = this.pageSize;
      this.getBlogList();
    },
    submit() {
      this.page.pageSize = this.pageSize;
      this.getBlogList();
    },
    update(id) {
      this.$router.push({
        path: "/updateBlog",
        query: this.page.list[id]
      });
    }
  }
};
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 300px;
  height: 380px;
  margin: 15px 5px;
}
.first-div {
  width: 95%;
  height: 100%;
  margin: 15px auto;
}
</style>